<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    {% load static %}
    <link href="{% static 'css/bootstrap.min.css' %}" rel='stylesheet'>
    <link rel="stylesheet" href="{% static 'css/friendly.css' %}">
    <!--<link rel="stylesheet" href="{%static 'css/index.css' %}">-->
    <link rel="stylesheet" href="{%static 'css/article-body.css'%}">
    <script src='http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js'></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script>

        $(document).ready(function () {
            $("p:has(img)").css("text-align", "center");
        });

        $(document).ready(function () {
            var imgs = $("img");
            imgs.each(function () {
                //alert($(".post").width());
                //alert( $("img").width());
                hScale = $(".post").width() / $(this).width();
                hScale *= 0.8;
                //alert(hScale);
                $(this).css("margin", "auto");
                $(this).css("width", "" + hScale * 100 + "%");
                $(this).css("display", "block");

            })

        })

        $(document).ready(function () {
            pList = $("p");
            //alert("aaa");
            pList.each(function () {
                $(this).css("width", "inherit");
            })
        })


    </script>
</head>
<body>
<div class='container'>
    <div class='row'>
        <header>
            <div class='logo'>
                <h1>X的博客</h1>
            </div>
        </header>
    </div>
    <!--以上为logo-->
    <div class='row'>
        <nav class='navbar navbar-default'>
            <div class='container-fluid'>
                <div class='navbar-header'>
                    <button type='button' class='navbar-toggle pull-right' data-toggle='collapse'
                            data-target='#nav-collapse'>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                    </button>
                    <div class='col-xs-6 col-sm-6 col-lg-6 navbar-left'>
                        <a class=' navbar-brand' href='/'>MYBLOG</a>
                    </div>
                </div>
                <div class='collapse navbar-collapse pull-right' id='nav-collapse'>
                    <ul class='nav navbar-nav'>
                        <li><a href='/'>HOME</a></li>
                        <li><a href='#'>ABOUT</a></li>
                        <li><a href='#'>CONTACT</a></li>
                        <li>
                            <form class='navbar-form navbar-left' method="get" action="/keyWord/" role='search'>
                                <div class='form-group'>
                                    <input type='text' class='form-control'  name='keyWord' placeholder='Search'>
                                </div>
                                <button type='submit' class='btn btn-primary'>
                                    <a href='#'>
                                        <span class='glyphicon glyphicon-search' style='color:white'></span>
                                    </a>
                                </button>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
<!--以上为上部导航-->
<div class='container'>
    <!--主体-->
    <div class='row'>
        <aside class='col-md-3'>
            <div class='list-group'>
                <a class='list-group-item side-list-title'>
                    <h3 align='center' class='list-group-item-heading'>
                        <span class='glyphicon glyphicon-leaf'></span>
                        文章类型
                    </h3>
                </a>
                {% for category in category_list %}
                <a href='{{category.link}}' class='list-group-item'>
                    <h4 align='center' class='side-list-item'>
                        {{category.name}}
                        <span class='glyphicon glyphicon-chevron-right'></span>
                    </h4>
                </a>
                {% endfor %}
            </div>
            <div class='list-group'>
                <a class='list-group-item side-list-title'>
                    <h3 align='center' class='list-group-item-heading'>
                        <span class='glyphicon glyphicon-tags'></span>
                        文章标签
                    </h3>
                </a>
                <form class='list-group-item tags-form' align='center' action="/tag/" method="get">
                    <fieldset>
                        {% for tag in tag_list %}
                        <span class='label label-danger tags-span' onclick='chose()' id='{{tag.id}}'>
                            <input class='tags-checkbox' type='checkbox' name='{{tag.id}}' id='{{tag.id}}-c'>{{tag.name}}</input>
                        </span>
                        {% endfor %}
                    </fieldset>
                    <fieldset>
                        <button type='submit' class='btn btn-primary tags-submit'>
                            <span style='color:white'>
                                筛选
                                <span class='glyphicon glyphicon-search' ></span>
                            </span>
                        </button>
                    </fieldset>
                </form>
            </div>
        </aside>
        <main class='col-md-9'>
            {% for article in article_list %}
            <article class='post'>
                <header class='entry-header'>
                    <h1 class='entry-title' align='center'>
                        <a href='{{article.link}}'>{{article.title}}</a>
                    </h1>
                    <div class='entry-meta' align='center'>
                        <span class='post-category about'>{{article.category}}</span>

                        <span class='post-date about'><time class='entry-date'>{{article.create_time}}</time></span>

                        <span class='post-author about'>{{article.author}}</span>
                        <span class='comments-link about'>4 Comments</span>
                    </div>
                </header>
                <div class='entry-content clearfix'>
                    <div style='font-size:1.3em;text-indent:2em;margin:0 5% 0 5%'>
                        {{article.body|safe}}
                    </div>
                </div>
                <br>
                <br>
            </article>


            <div id="comment-list" class="comment-list">
                <h1>评论</h1>
                <ul>
                    {%for comment in comment_list%}

                    <li class="visitorInfo">
                        <div style="display: block;">
                            <span class="id">{{ comment.name }}</span>
                            <span class="time">{{ comment.created_time }}</span>
                            <span class="email">{{ comment.email }}</span>
                        </div>
                    </li>
                    <script>
                        $(document).ready(function () {
                            $(".id").css("font-size", "25px");
                            $(".id").css("margin", "0");
                            $(".id").css("padding", "0");
                            //$(".id").css("color", "#8c8c8c")
                            $(".time").css("font-size", "5px");
                            $(".time").css("color", "#8c8c8c");
                            $(".email").css("font-size", "5px");
                            $(".email").css("color", "#8c8c8c");

                        });
                    </script>
                    <p class="content" style="font-size: 20px;color: #5e5e5e;margin-left: 1%">{{ comment.text }}</p>
                    {% endfor %}
                </ul>
            </div>

            <hr/>
            <form action="{% url 'comment:articleComment' article.pk %}" method="post" class="basic-grey">
                {% csrf_token %}
                <h1>回复栏</h1>
                <label for="{{ form.name.id_for_label }}">
                    <span class="narrow-span">昵称：</span>
                    {{ form.name }}
                    {{ form.name.errors }}
                </label>
                <label>
                    <span class="narrow-span">邮箱：</span>
                    {{ form.email }}
                    {{ form.email.errors }}
                </label>
                <label>
                    <span class="long-span">消息：</span>
                    {{ form.text }}
                    {{ form.text.errors }}
                </label>
                <label>
                    <span>&nbsp;</span>
                    <button type="submit" class="button">Send</button>
                </label>
            </form>
            {% empty %}
            <div class="no-post">文章丢失！</div>
            {% endfor %}
        </main>
    </div>
</div>
</body>
<script>
    <!-- js监测checkbox是否被选中 -->
    function chose() {
        var obj = event.srcElement;
        var t = $('#' + obj.id);
        var c = $('#' + obj.id + '-c');
        if (!c.prop('checked')) {
            t.removeClass('label-danger');
            t.addClass('label-success');
            c.prop('checked', true);
        }
        else {

            t.removeClass('label-success');
            t.addClass('label-danger');
            c.prop('checked', false);
        }

    }
    function checkbox() {
        var box1 = document.getElementById('checkbox1');
        var box2 = document.getElementById('checkbox2');
        var box3 = document.getElementById('checkbox3');
        var box4 = document.getElementById('checkbox4');
        if (!box1.checked) {
            alert(box1.value);
        }
        if (box2.checked) {
            alert(box2.value);
        }
        if (box3.checked) {
            alert(box3.value);
        }
        if (box4.checked) {
            alert(box4.value);
        }
        //点击确认按钮后（或者点击下一页后）让所有按钮恢复初始状态

    }
</script>
</html>
